<template>
  <div>
    <el-card>
      <el-row type="flex" align="middle" justify="space-between">
        <el-col :span="3">文章分类</el-col>
        <el-col :span="3">
          <el-button @click="addCate" type="primary" size="mini">添加分类</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格 -->
    <el-card>
      <el-table :data="cate_list" style="width: 100%" border>
        <el-table-column align="center" prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column
          prop="cate_name"
          align="center"
          label="项目名称"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="cate_alias"
          align="center"
          label="分类别名"
          width="300"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- <template slot-scope="scope"> -->
          <template slot-scope="scope">
            <el-button size="mini" @click="copyreaderCate(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="delThisCate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹出层 -->
    <el-dialog
      :title="title ? '新增分类' : '编辑分类'"
      width="30%"
      :before-close="offDialog"
      :visible="dialogVisible"
      top="30vh"
    >
      <el-form
        :model="formDate"
        ref="dataForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item prop="cate_name" label="分类名称">
          <el-input
            name="cate_name"
            v-model="formDate.cate_name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cate_alias" label="分类别名">
          <el-input
            name="cate_alias"
            v-model="formDate.cate_alias"
            placeholder="请输入别名"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-col :span="13"
            ><el-form-item class="dialog-footer">
              <el-button size="mini" @click="offDialog">取 消</el-button>
              <el-button size="mini" type="primary" @click="sendReq"
                >确 定</el-button
              >
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addArtCate,
  getArtCate,
  getCateInfo,
  changeAnCate,
  deleteCate
} from '@/api/article'
// 定义校验规则
const numOrStr = (rule, value, callback) => {
  if (typeof value === 'number' || typeof value === 'string') {
    return callback()
  }
  return callback(new Error('数据格式为数字或者字母'))
}

export default {
  data () {
    return {
      formDate: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [
          { required: true, trigger: 'blur', message: '请填写分类名称' },
          { min: 1, max: 10, trigger: 'blur', message: '分类名称长度为1-10' }
        ],
        cate_alias: [
          { required: true, trigger: 'blur', message: '请填写分类别名' },
          { min: 1, max: 15, trigger: 'blur', message: '分类名称长度为1-15' },
          { validator: numOrStr, trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 默认关闭
      cate_list: [],
      title: true
    }
  },
  created () {
    this.tableInfo() // 初始化表单
  },
  methods: {
    // 数据还原 && 表单清空
    offDialog () {
      this.$refs.dataForm.resetFields()
      this.dialogVisible = false
      this.title = true
    },
    // 初始化表格
    tableInfo () {
      getArtCate().then((res) => {
        this.cate_list = res.data
      })
    },

    // 添加分类  ==> 改变title ==> 打开弹出层
    addCate () {
      this.dialogVisible = true
    },

    // 添加 || 编辑
    sendReq () {
      this.$refs.dataForm.validate((result, obj) => {
        // 通过判断title来决定发送的请求
        if (result) {
          try {
            if (this.title) {
              addArtCate(this.formDate).then((res) => {
                this.$message.success(res.message)
              })
            } else {
              changeAnCate({ ...this.formDate }).then((res) => {
                this.$message.success(res.message)
              })
            }
          } catch (error) {
            this.$message(error)
          } finally {
            this.offDialog()
            this.tableInfo()
          }
        }
      })
    },

    /**
     * @param {*} cate:所点击的行数据
     * @return {*}
     */
    copyreaderCate (cate) {
      this.title = false
      const id = cate.id
      getCateInfo(id).then((res) => {
        // 打开弹窗 && 填充数据
        this.dialogVisible = true
        this.formDate = { ...res.data, id: cate.id }
      })
    },

    // 删除分类
    delThisCate (cate) {
      this.$confirm('是否删除该分类？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteCate(cate.id)
        this.$message.success(res.message)
        this.tableInfo()
      }).catch(() => {
        this.$message('取消删除分类！')
      })
    }
  }
}
</script>

<style></style>
